<template lang="html">
  <!-- 在首页父组件发送http请求,后将数据通过props传递给子组件,可减少请求次数,减少服务器压力 -->
  <div class="index">
    <selfHeader></selfHeader>
    <div class="activeBox">
      <span @click="tab(3)" :class="activeTab === 3 ? 'activeChoose' : ''">林场土地</span>
      <span @click="tab(1)" :class="activeTab === 1 ? 'activeChoose' : ''">我的土地</span>
      <span @click="tab(2)" :class="activeTab === 2 ? 'activeChoose' : ''">历史土地</span>
    </div>

    <div v-if="activeTab === 1" class="toatalNumber">
      <span><b>总茶籽: </b> <b>{{ userTeaNum || 0 }}</b></span>
      <span><b>总茶树:</b>  <b>{{ totalTeaTreeNum || 0 }}</b></span>
      <span> <b>土地数: </b> <b>{{ userLandNum || 0 }}</b></span>
    </div>


    <div v-if="activeTab === 3" class="listBox">
      <div v-for="(item, index) in list" :key="index" class="list">
        <div class="name">
          <p>{{ item.name }}</p>
          <span>土地数量: {{ item.havaNum }}</span>
        </div>
        <div class="flexBox">
          <span><b>日产茶籽 </b> <i>{{ item.output }}</i></span>
          <span><b>总产出 </b> <i>{{ item.totalOutput }}</i></span>
          <span><b>使用时间 </b> <i>{{ item.validTime }}</i></span>
        </div>
        <div class="tiemBox2">
          <span>兑换需要的茶籽: {{ item.teaSeed }}</span>
          <button @click="buy(item)">购买</button>
        </div>
      </div>
    </div>

    <div   v-if="activeTab < 3" class="listBox">
      <div v-for="(item, index) in list" :key="index" class="list">
        <div class="name">
          <p>{{ item.name }}</p>
          <span>土地数量: {{ item.landNum }}/{{ item.havaNum }}</span>
        </div>
        <div class="flexBox">
          <span><b>日产茶籽: </b> <i>{{ item.output }}</i></span>
          <span><b>总产出: </b> <i>{{ item.totalOutput }}</i></span>
          <span><b>已产茶籽: </b> <i>{{ item.teaNum }}</i></span>
        </div>
        <div class="tiemBox">
          <span>土地有效时间: {{ item.buyTime }} 至 {{ item.expirationTime }}</span>
        </div>
     <!--   <div class="tiemBox">
          <span>兑换需要的茶籽: {{ item.teaSeed }}</span>
        </div> -->
      </div>
    </div>


  </div>
</template>

<script>
import {
  landList,
  landListBuy,
  gameUserLandGet,
  gameUserHisLandGet,
} from "@/http/api";
import { Toast } from "mint-ui";
import selfHeader from "@/common/header";

export default {
  components: {
    selfHeader,
  },
  data() {
    return {
      activeTab: 3,
      user: {},
      userTeaNum: 0,
      userLandNum: 0,
      totalTeaTreeNum: 0,
      list: [],
    };
  },
  methods: {
    tab(index) {
      this.activeTab = index * 1;
      if (index * 1 === 1) {
        this.landGet();
      }
      if (index * 1 === 2) {
        this.hisLandGet();
      }

      if (index * 1 === 3) {
        this.landListItem();
      }
    },

    async landListItem() {
      const data = {
        uid: this.user.user.uid,
      };
      const res = await landList(data);
      if (res.code * 1 === 200) {
        this.list = res.data;
      }
    },

    async buy(item) {
      const data = {
        uid: this.user.user.uid,
        lid: item.id,
      };
      const res = await landListBuy(data);
      if (res.code * 1 === 200) {
        Toast("购买成功");
      }
    },

    async landGet() {
      const data = {
        uid: this.user.user.uid,
      };
      const res = await gameUserLandGet(data);
      if (res.code * 1 === 200) {
        this.userTeaNum = res.data.userTeaNum;
        this.userLandNum = res.data.userLandNum;
        this.totalTeaTreeNum = res.data.totalTeaTreeNum;
        this.list = res.data.userLand;
      }
    },
    async hisLandGet() {
      const data = {
        uid: this.user.user.uid,
      };
      const res = await gameUserHisLandGet(data);
      if (res.code * 1 === 200) {
        this.list = res.data.userLand;
      }
    },
  },
  created() {
    this.user = JSON.parse(localStorage.getItem("UserMessage"));
    this.landListItem();
  },
};
</script>


<style lang="less" scoped>
.activeBox {
  margin-top: 20vw;
  margin-bottom: 10px;
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-size: 18px;
  padding-bottom: 2px;

  .activeChoose {
    color: #048ab9;
    border-bottom: 2px solid #048ab9;
    font-weight: 600;
  }
}

.toatalNumber {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-top: 16px;

  span {
    width: 30%;
    display: block;

    b {
      display: block;
      text-align: center;
      font-size: 14px;
    }

    b:first-child {
      font-size: 14px;
    }

    b:last-child {
      font-size: 22px;
      color: #048ab9;
      margin-top: 8px;
    }
  }
}

.listBox {
  padding: 0 10px;
  margin-bottom: 16px;
  margin-top: 20px;

  .list {
    margin-bottom: 10px;
    border: 1px solid #048ab9;
    border-radius: 6px;
    padding: 6px 10px;
    background-size: 100% 100%;
    background-image: url("../assets/land_bg.jpeg");

    .name {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      p {
        font-size: 22px;
        color: #048ab9;
        font-weight: bold;
      }
      span {
        font-size: 16px;
        font-weight: bold;
      }
    }
  }

  span {
    font-size: 16px;
  }

  .flexBox {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 6px;

    span {
      width: 32%;
      display: block;
      text-align: left;
      text-align: center;

      b {
        display: block;
        text-align: center;
        font-weight: normal;
      }
      i {
        display: block;
        margin-top: 4px;
        font-size: 20px;
        color: #048ab9;
      }
    }
  }

  .tiemBox {
    margin-bottom: 10px;
    padding: 0;
    border: none;
    margin-top: 10px;

    span {
      display: block;
      font-size: 14px;
      margin-left: 16px;
    }
  }

  .tiemBox2 {
    margin-bottom: 10px;
    padding: 0;
    border: none;
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    span {
      display: block;
      font-size: 14px;
      margin-left: 16px;
    }
    button {
      background: #048ab9;
      color: white;
      padding: 4px 10px;
      border-radius: 6px;
    }
  }
}
</style>
